<template>
  <div class="article-draft-card" @click="ToEditorDraft">
    <div class="draft-title">{{ props.articleDraft?.title || '未命名' }}</div>

    <div class="info-box">
      {{ standardDate(Number(props.articleDraft?.pushDate)) }}<span @click.stop="delectDraft">删除</span>
    </div>

    <el-dialog v-model="dialogVisible" title="删除内容" width="30%">
      <span>删除内容后不可恢复，确定删除吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="delectDraftConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue'
import { standardDate } from '/@/hooks/useNumberFilter'
import { articleDelDraft } from '/@/api/article/articleAdd'

import router from '/@/router'

const dialogVisible = ref(false)

interface articleDraftCardProps {
  articleId: number // 文章ID
  pushDate: string // 发布时间

  title: string // 文章题目
  articleSummary: string // 文章摘要
  articleImg?: string // 文章封面
}

let props = defineProps({
  articleDraft: Object as PropType<articleDraftCardProps>
})

const ToEditorDraft = () => {
  const newPage = router.resolve(`/editor/draft/${props.articleDraft?.articleId}`)
  window.open(newPage.href, '_blank')

  // router.push(`/editor/draft/${props.articleDraft?.articleId}`)
}

const delectDraft = () => {
  dialogVisible.value = true
}

const delectDraftConfirm = () =>{
  articleDelDraft(props.articleDraft?.articleId).then(res=>{
    if(res.data){
      alert('删除成功!')
      router.go(0)
      dialogVisible.value = false
    }
  }).catch(res=>{
    alert('删除失败!')
      router.go(0)
      dialogVisible.value = false
  })
}
</script>

<style lang="scss" scoped>
.article-draft-card {
  width: 100%;

  height: 116px;

  max-width: 740px;

  background-color: white;

  box-sizing: border-box;
  padding: 20px 20px 0;

  margin-top: 20px;
  border-radius: 6px;

  cursor: pointer;

  .draft-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #1d2129;
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .info-box {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #909090;

    span {
      margin-left: 20px;

      &:hover {
        color: #007fff;
      }
    }
  }
}
</style>
